<template>
	<view>
		<view class="u-flex-col u-col-center u-rela" style="height: 80rpx;background-color: #f5f5f5;">
			<image src="../../../static/moive/screen.png" style="width: 80%;height: 60rpx;"></image>
			<view class="u-abso u-font-26 u-type-info" style="top: 32rpx;">{{planData.hallName}}</view>
		</view>
		<movable-area style="width: 750rpx;height:calc(100vh - 80rpx - 50px - 480rpx);background-color: #f5f5f5;overflow: hidden;">
			<movable-view style="width: 750rpx;height: 800rpx;" :inertia="true" :scale="true" :out-of-bounds="true"
				:scale-min="scaleMin" :scale-max="10" direction="all" @change="onMove" @scale="onScale">
				<view class="u-abso u-flex" v-for="(item,index) in seatData" :key="index"
					:style="{'top':(item.rowNo)*seatSize+'px','left':(item.columnNo)*seatSize+'px'}" @click="buySeat(item,index)">
					<image :src="item.status==1?empty:item.status==2?sold:select"
						:style="{'width': seatSize+'px','height':seatSize+'px'}"></image>
				</view>
			</movable-view>
		</movable-area>
		<view style="height: 80rpx;background-color: #f5f5f5;" class="u-flex u-row-around u-col-center">
			<view class="u-flex u-col-center">
				<image src="../../../static/moive/empty.png" style="width: 50rpx;height: 50rpx;"></image>
				<view>可选</view>
			</view>
			<view class="u-flex u-col-center">
				<image src="../../../static/moive/select.png" style="width: 50rpx;height: 50rpx;"></image>
				<view>不可选</view>
			</view>
			<view class="u-flex u-col-center">
				<image src="../../../static/moive/sold.png" style="width: 50rpx;height: 50rpx;"></image>
				<view>选中</view>
			</view>
		</view>
		<view style="height: 400rpx;" class="u-p-30">
			<view class="u-f-w u-font-30 u-m-b-20">{{planData.movieName}}</view>
			<view class="u-type-info">
				<text class="u-p-r-10">{{curDate}}</text>
				<text class="u-p-r-10">{{planData.startTime}}-{{planData.stopTime}}</text>
				<text class="u-p-r-10">{{planData.planType}}</text>
			</view>
			
			<view class="u-m-t-20 u-m-b-20">
				<scroll-view scroll-x="true" >
					<view :style="{'width':250*(selectedSeat.length)+'rpx'}">
						<view class="u-flex u-p-l-20 u-p-r-20 u-p-b-12 u-p-t-12 u-row-between u-m-r-20" 
						style="background-color: #f5f5f5;border-radius: 10rpx;width: 180rpx;float: left;"
						v-for="(item,index) in selectedSeat" :key="index">
							<view class="u-font-24 u-typ-info u-m-r-20">
								<view>{{item.seatName}}</view>
								<view>¥{{item.price}}</view>
							</view>
							<view>
								<u-icon name="close" size="24"></u-icon>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<view class="u-flex u-row-center u-col-center" style="height: 146rpx;">
				<u-button type="warning" shape="circle" style="width: 100%;">{{selectedSeat.length>0?`共${price}元 确认选座`:'请选座位'}}</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				empty: require('@/static/moive/empty.png'),
				select: require('@/static/moive/select.png'),
				sold: require('@/static/moive/sold.png'),
				planData:{},
				hallName:'',
				movieName:'',
				curDate:'',
				planId: '',
				seatData: [],
				seatSize: 64,
				scaleMin: 1,
				boxWidth: 0,
				lineHeight: 0,
				price:0,
				selectedSeat:[/* {
					seatName: "8排1座",
					price:'29.9'
				},
				{
					seatName: "8排1座",
					price:'29.9'
				},
				{
					seatName: "8排1座",
					price:'29.9'
				},
				{
					seatName: "8排1座",
					price:'29.9'
				},
				{
					seatName: "8排1座",
					price:'29.9'
				} */]

			}
		},
		mounted() {
			//获取宽度
			var that = this
			uni.getSystemInfo({
				success: function(e) {
					that.boxWidth = e.screenWidth;
					//#ifdef H5
					this.scaleMin = 0.95
					//#endif
				}
			})
		},
		methods: {
			getSeatList() {
				this.$u.api.movieSeat({
					planId: this.planData.planId
				}).then(res => {
					this.seatData = res.data.lists;

					let colArr = []
					let rowArr = []
					res.data.lists.forEach(item => {
						colArr.push(item.columnNo);
						rowArr.push(item.rowNo);
					});
					colArr = Array.from(new Set(colArr)).sort(function(a, b) {
						return a - b
					});
					rowArr = Array.from(new Set(rowArr)).sort(function(a, b) {
						return a - b
					})
					let seatCol = colArr[colArr.length - 1];
					let seatRow = rowArr[rowArr.length - 1];
					//设置座位大小
					this.seatSize = this.boxWidth > 0 ? this.boxWidth / (seatCol + 2) : 414 / (seatCol + 2);
				})
			},
			//放大缩小事件
			onScale: function(e) {
				//this.showTis = false
				// this.moveX=-e.detail.x
				let w = this.boxWidth * 0.5
				let s = 1 - e.detail.scale
				this.moveX = w * s
				this.scale = e.detail.scale
				if (s > 0 || s === 0) {
					this.showTis = true
				}
			},
			//移动事件
			onMove: function(e) {
				this.$u.toast(e.detail.x);
				//this.showTis = false
				this.moveX = e.detail.x
			},
			buySeat(item,index){
				if(item.status==2){
					return
				}
				if(this.seatData[index].status==3){
					this.seatData[index].status = 1
				}else{
					this.seatData[index].status = 3;
					this.selectedSeat.push({
						seatName: "8排1座",
						price:'29.9'
					})
					 
				}
				
				var _this = this;
				this.price = 0;
				this.selectedSeat.forEach(item=>{
					this.price += parseFloat(item.price,100)
				})
			}
		}
	}
</script>

<style scoped>
	.Stage {
			background-color: #dddddd;
			width: 380rpx;
			height: 34rpx;
			transform: perspective(34rpx) rotateX(-5deg);
			margin: 0 auto;
		}
</style>
